<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">

</head>
<body>
<h1> 订单管理界面 </h1>
<table class="layui-hide" id="checktable" lay-filter="checktable"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">增加一个订单</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form class="layui-form" lay-filter = "showform" style="margin: 5%; display: none" id = "window">
    <div class="layui-form-item">
        <label class="layui-form-label">审核编号</label>
        <div class="layui-input-inline">
            <input id="checkid" type="text" name="checkid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">教材名</label>
        <div class="layui-input-inline">
            <select id = "bookname" name="bookname" lay-filter="bookname">
                <option value="">请选择一个教材</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">教材价格</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择教材以确定教材价格"  id="price" readonly type="text" name="price" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">教材编号</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择教材以确定教材号"  id="bookid" readonly type="text" name="bookid" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">课程名</label>
        <div class="layui-input-inline">
            <select id = "coursename" name="coursename" lay-filter="coursename">
                <option value="">请选择一个课程</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">课程号</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择课程以确定课程号"  id="cid" readonly type="text" name="cid" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">阶段</label>
        <div class="layui-input-inline">
            <select id = "stage" name="stage" lay-filter="stage">
                <option value="">请选择审核阶段</option>
                <option value="0">未上传或已被删除</option>
                <option value="1">教师已上传，书商未审核</option>
                <option value="2">书商已经审核，管理员未审核</option>
                <option value="3">管理员审核，开放教材预定</option>
                <option value="4">预定完毕，待发放</option>
                <option value="5">发放完毕</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-inline">
            <input id="starttime" type="text" name="starttime" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-inline">
            <input id="endtime" type="text" name="endtime" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>

<script src="../../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>

    layui.use(['table', 'form', 'laydate'], function(){

        var table = layui.table,
            form = layui.form,
                $ = layui.jquery
             laydate = layui.laydate;

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/courseFind",
            success: function (rs) {
                console.log("找到所有course", rs)
                $.each(rs.data, function (index, item) {
                    // 追加option节点
                    //item.name是option里的文本值
                    //item.id是option的value值
                    $("#coursename").append(new Option(item.name, item.cid));
                });
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/textbookFind",
                    success: function (rs) {
                        console.log("找到所有book", rs)
                        $.each(rs.data, function (index, item) {
                            // 追加option节点
                            //item.name是option里的文本值
                            //item.id是option的value值
                            $("#bookname").append(new Option(item.name, item.bookid));
                        });
                        //重新渲染下拉框
                        form.render('select');
                    },
                    error: function (res){
                        console.log(res);
                    }
                });
            },
            error: function (res){
                console.log(res);
            }
        });


        //下拉选择框监听事件
        form.on('select(coursename)', function(data){
            $('#cid').val(data.value);
        });

        form.on('select(bookname)', function(data){
            console.log("book监听", data.value)

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/textbookFindByBookId",
                data: {"bookid":data.value},
                success: function (res) {
                    console.log(res);
                    $('#bookid').val(data.value);
                    $('#price').val(res.data.price);
                    console.log("书本价格", res.data.price)
                },
                error: function (res){
                    console.log(res);
                }
            });
        });

            //时间选择器
            laydate.render({
                elem: '#starttime' //指定元素
                ,type: 'datetime'
            });
            laydate.render({
                elem: '#endtime' //指定元素
                ,type: 'datetime'
            });
        table.on('tool(checktable)', function (obj){
             var Tdata = obj.data,

              layEvent = obj.event;
            console.log("原来表中的数据", Tdata);
            console.log(layEvent)

            /**
             * 修改操作
             */
            if(layEvent === "edit") {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/checkFindById",
                    data: obj.data,
                    success: function (res) {
                        console.log(res);
                        Rdata = res.data;
                        layer.open({
                            type: 1
                            ,skin: 'layui-layer-molv'
                            ,area: ['500px', '500px']
                            ,title: ['编辑课程信息','font-size:18px']
                            ,btn: ['确定', '取消']
                            ,shadeClose: true
                            ,shade: 0 //遮罩透明度
                            ,maxmin: true //允许全屏最小化
                            ,content:$("#window") //弹窗路径,
                            ,success:function(layero, index){
                                $('#checkid').val(Rdata.checkid);
                                $('#bookid').val(Rdata.bookid);
                                $('#price').val(Rdata.price);
                                $('#bookname').val(Rdata.bookid);
                                $('#cid').val(Rdata.cid);
                                $('#coursename').val(Rdata.cid);
                                $('#stage').val(Rdata.stage);
                                $('#starttime').val(Rdata.starttime);
                                $('#endtime').val(Rdata.endtime);
                                form.render();
                            }
                            , yes:function(){
                                //拿到表格数据
                                let tabledata = form.val("showform");
                                console.log(tabledata)
                                tabledata.id = Rdata.id;

                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    url: "/checkUpdateById",
                                    data: tabledata,
                                    success: function (res) {
                                        console.log(res);
                                    },
                                    error: function (res){
                                        console.log(res);
                                    }
                                });
                                layer.close(layer.index);
                            }
                            , end: function (){
                                table.reload('checktable');
                            }

                        })
                    },
                    error: function (res){
                        console.log(res);
                    }
                });


            }
            /**
             *  刷新操作
             */
            else if(layEvent === "del") {

                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构

                    layer.close(index);
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/checkDel",
                        data: obj.data,
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (res){
                            console.log(res);
                        }
                    });
                });
            }
        })

        /**
         * table显示
         */
        table.render({
            elem: '#checktable'
            ,url: '/checkFind'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:50, fixed: 'left'}
                ,{field:'checkid', title:'审核编号', width:120, edit: 'text'}
                ,{field:'bookname', title:'教材名', width:120, edit: 'text'}
                ,{field:'bookid', title:'教材编号', width:100, edit: 'text'}
                ,{field:'price', title:'价格', width:100, edit: 'text'}
                ,{field:'coursename', title:'课程名', width:120, edit: 'text'}
                ,{field:'cid', title:'课程编号', width:100, edit: 'text'}
                ,{field:'stage', title:'阶段', width:260, edit: 'text'}
                ,{field:'starttime', title:'开始时间', width:180, edit: 'text'}
                ,{field:'endtime', title:'结束时间', width:180, edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,done: function(res, page, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                //     <option value="">请选择一个课程</option>
                //     <option value="0">未上传或已被删除</option>
                //     <option value="1">教师已上传，书商未审核</option>
                //     <option value="2">书商已经审核，管理员未审核</option>
                //     <option value="3">管理员审核，开放教材预定</option>
                //     <option value="4">预定完毕，待发放</option>
                //     <option value="5">发放完毕</option>
                //分类显示中文名称
                $("[data-field='stage']").children().each(function () {
                    if ($(this).text() == '0') {
                        $(this).text("未上传或已被删除")
                    } else if ($(this).text() == '1') {
                        $(this).text("第1阶段：教师已上传，书商未审核")
                    } else if ($(this).text() == '2') {
                        $(this).text("第2阶段：书商已经审核，管理员未审核")
                    } else if ($(this).text() == '3') {
                        $(this).text("第3阶段：管理员审核，开放教材预定")
                    }else if ($(this).text() == '4') {
                        $(this).text("第4阶段：预定完毕，待发放")
                    }else if ($(this).text() == '5') {
                        $(this).text("第5阶段：发放完毕")
                    }
                });
            }
        });

        //工具栏事件
        table.on('toolbar(checktable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    $('#checkid').val("");
                    $('#bookname').val("");
                    $('#bookid').val("");
                    $('#price').val("");
                    $('#coursename').val("");
                    $('#cid').val("");
                    $('#stage').val("");
                    $('#starttime').val("");
                    $('#endtime').val("");
                    layer.open({
                        type: 1
                        ,skin: 'layui-layer-molv'
                        ,area: ['500px', '500px']
                        ,title: ['编辑课程信息','font-size:18px']
                        ,btn: ['确定', '取消']
                        ,shadeClose: true
                        ,shade: 0 //遮罩透明度
                        ,maxmin: true //允许全屏最小化
                        ,content:$("#window") //弹窗路径,
                        , yes:function(){
                            let formdata = form.val("showform");
                            console.log("表单数据", formdata)
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: "/checkAdd",
                                data: formdata,
                                success: function (res) {
                                    console.log(res);
                                },
                                error: function (res){
                                    console.log(res);
                                }
                            });
                            layer.close(layer.index);
                        }
                        , end: function (){
                            table.reload('checktable');
                        }
                    })
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });
    });
</script>



</body>

</html>

